<template>
  <div>
    <div v-for="item in forms" class="form-item">
      <div class="title">{{item.label}}</div>
      <d-form :options="item.options" class="edit-form"/>
    </div>
    <el-button type="primary" class="submit-button"  :color="formOptions.buttonColor" @click="submitForm">提交</el-button>
  </div>
</template>

<script setup lang="ts">
  import {reactive, ref, watch} from 'vue'
  import {updateConfig} from '@/api/site'
  import {ElMessage, FormInstance} from "element-plus";
  import {communicationType,configType,targetType} from '@/utils/deviceConfig'


  let props = defineProps({
    options:{       // form配置
      type:Object
    },
    params:{
      type:Object,
      default:{
        id:'',            // 站点的id/省份的code
        targetType:'',    // province 省份，device设备
      }         
    },
    config:{         // 设备详情
      type:Object
    }
  });
  let formOptions = props.options;
  // let formOptions = {
  //   labelPosition: 'right',
  //   size: 'default',
  //   formClass: 'mqtt-form',
  //   inline: true,
  //   buttonColor: '#3aecff'
  // };
  let form = reactive({})
  watch(
    ()=>props.config,
    (val)=>{
      if(val.stationData){
        form = Object.assign(form,val.stationData)
      }
    },
    {
      deep:true
    }
  )


  const station = {
    labelWidth: '120px',
    inline: formOptions.inline,
    labelPosition: formOptions.labelPosition,
    formRef: ref<FormInstance>(),
    formClass: formOptions.formClass,
    size: formOptions.size,
    formItems: [
      {
        label: '台站ID',
        prop: 'id',
        component: 'd-input',
        options: {
          placeholder: '请输入台站ID',
        },
        rules: {
          required: true,
          message: '请输入台站ID',
          trigger: 'change',
        },
        disabled:true
      },
      // {
      //   label: '经度',
      //   prop: 'longitude',
      //   component: 'd-input',
      //   options: {
      //     placeholder: '请输入经度',
      //     type: 'number'
      //   },
      //   rules: {
      //     required: true,
      //     message: '请输入经度',
      //     trigger: 'change',
      //   },
      // },
      // {
      //   label: '纬度',
      //   prop: 'latitude',
      //   component: 'd-input',
      //   options: {
      //     placeholder: '请输入纬度',
      //     type: 'number'
      //   },
      //   rules: {
      //     required: true,
      //     message: '请输入纬度',
      //     trigger: 'change',
      //   },
      // },
      {
        label: '台网编号',
        prop: 'stationCode',
        component: 'd-input',
        options: {
          placeholder: '请输入台网编号',
        },
        rules: {
          required: true,
          message: '请输入台网编号',
          trigger: 'change',
        },
      },
      {
        label: '位置标识符',
        prop: 'number',
        component: 'd-input',
        options: {
          placeholder: '请输入位置标识符',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入位置标识符',
          trigger: 'change',
        },
      },
      {
        label: '安装方位',
        prop: 'azimuthal',
        component: 'd-input',
        options: {
          placeholder: '请输入安装方位',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入安装方位',
          trigger: 'change',
        },
      },
      {
        label: '软件版本',
        prop: 'version',
        component: 'd-input',
        options: {
          placeholder: '请输入软件版本',
        },
        rules: {
          required: true,
          message: '请输入软件版本',
          trigger: 'change',
        },
        disabled: true
      },
    ],
    form: form
  }

  const sensor = {
    labelWidth: '120px',
    inline: formOptions.inline,
    labelPosition: formOptions.labelPosition,
    formRef: ref<FormInstance>(),
    formClass: formOptions.formClass,
    size: formOptions.size,
    formItems: [
      {
        label: '应变阈值',
        prop: 'strainThreshold',
        component: 'd-input',
        options: {
          placeholder: '请输入应变阈值',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入应变阈值',
          trigger: 'change',
        },
      },
      {
        label: '加速度阈值',
        prop: 'accelerationThreshold',
        component: 'd-input',
        options: {
          placeholder: '请输入加速度阈值',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入加速度阈值',
          trigger: 'change',
        },
      },
      {
        label: '实时上传点数',
        prop: 'passageDataCount',
        component: 'd-input',
        options: {
          placeholder: '请输入实时上传点数',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入实时上传点数',
          trigger: 'change',
        },
      },
      {
        label: '采样点数',
        prop: 'samplingRate',
        component: 'd-input',
        options: {
          placeholder: '请输入采样点数',
          type: 'number'
        },
        rules: {
          required: true,
          message: '请输入采样点数',
          trigger: 'change',
        },
      },
      {
        label: '振动模式',
        prop: 'mode',
        component: 'd-select',
        options: {
          placeholder: '请选择振动模式',
          options: [{
            label: '3振动模式',
            value: 0,
          }, {
            label: '6振动模式',
            value: 1,
          }, {
            label: '9振动模式',
            value: 2,
          }]
        },
        rules: {
          required: true,
          message: 'Please select Activity zone',
          trigger: 'change',
        },
      },
    ],
    form: form
  }

  const forms=[
    {
      label: '站点信息配置',
      options: station
    },
    {
      label: '传感器配置',
      options: sensor
    },
  ]

  const submitForm = async () => {
    let formEl = station.formRef?.value;
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        updateData(station.form)
      }
    })
  }

  type paramsType = {
    configType:number,
    id:string,
    targetType:string,
    [propName:string]:any,
  }
  const updateData = (data)=>{
    let params:paramsType = {
      configType:configType['stationInfo'],
      id:props.params.id,
      targetType:targetType[props.params.targetType],
      stationData: data
    }
    updateConfig(params).then(res=>{
      ElMessage.success('更新成功！')
    })
  }


  const resetForm = () => {
    let formEl = options.formRef?.value;
    if (!formEl) return
    formEl.resetFields()
  }


</script>
